<extend name="Public/base" />

<block name="body">
<div class="main-title">
    <h2>
        导航排序 [ <a href="{:U('index',array('pid'=>I('pid')))}">返回列表</a> ]
    </h2>
</div>

<div class="panel panel-default">
    <div class="panel-heading">
        排序
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-lg-6">
            <!-- 表单 -->
            <form action="{:U('sort')}" method="post" class="form" role="form" >
 
                <div class="sort_center">
                    <div class="sort_option">
                        <select value="" size="8">
                            <volist name="list" id="vo">
                                <option class="ids" title="{$vo.title}" value="{$vo.id}">{$vo.title}</option>
                            </volist>
                        </select>
                    </div>
                    <div class="sort_btn">
                        <button class="btn btn-default top " type="button">第 一</button>
                        <button class="btn btn-default up " type="button">上 移</button>
                        <button class="btn btn-default down " type="button">下 移</button>
                        <button class="btn btn-default bottom " type="button">最 后</button>
                    </div>
                </div>
                <div class="sort_bottom">
                    <input type="hidden" name="ids">
                    <button class="sort_confirm btn submit-btn" type="button">确 定</button>
                    <button class="sort_cancel btn btn-return" type="button" url="{:U('index',array('pid'=>I('pid')))}">返 回</button>
                </div>
            </form>		
            </div><!-- /.col-lg-6 (nested) -->
        </div><!-- /.row (nested) -->
    </div><!-- /.panel-body -->
</div><!-- /.panel -->
</block>

<block name="script">
<script type="text/javascript">
//导航高亮
 

$(function(){
    sort();
    $(".top").click(function(){
        rest();
        $("option:selected").prependTo("select");
        sort();
    })
    $(".bottom").click(function(){
        rest();
        $("option:selected").appendTo("select");
        sort();
    })
    $(".up").click(function(){
        rest();
        $("option:selected").after($("option:selected").prev());
        sort();
    })
    $(".down").click(function(){
        rest();
        $("option:selected").before($("option:selected").next());
        sort();
    })
    $(".search").click(function(){
        var v = $("input").val();
        $("option:contains("+v+")").attr('selected','selected');
    })
    function sort(){
        $('option').text(function(){return ($(this).index()+1)+'.'+$(this).text()});
    }

    //重置所有option文字。
    function rest(){
        $('option').text(function(){
            return $(this).text().split('.')[1]
        });
    }

    //获取排序并提交
    $('.sort_confirm').click(function(){
        var arr = new Array();
        $('.ids').each(function(){
            arr.push($(this).val());
        });
        $('input[name=ids]').val(arr.join(','));
        $.post(
            $('form').attr('action'),
            {
            'ids' :  arr.join(',')
            },
            function(data){
                if (data.status) {
                    updateAlert(data.info + ' 页面即将自动跳转~','alert-success');
                }else{
                    updateAlert(data.info,'alert-success');
                }
                setTimeout(function(){
                    if (data.status) {
                        $('.sort_cancel').click();
                    }
                },1500);
            },
            'json'
        );
    });

    //点击取消按钮
    $('.sort_cancel').click(function(){
        window.location.href = $(this).attr('url');
    });
})
</script>
</block>